<template>
  <div class="video_container" v-loading="domLoading2">
    <div class="video_container_top">
      <div class="video_container_top_left">
        <div class="video_container_top_left_title" @click="goOn">
          <i class="el-icon-arrow-left" />
          <div v-if="$route.query.status == 1" class="mv_info">MV详情</div>
          <div v-else class="mv_info">视频详情</div>
        </div>
        <div class="video_container_top_left_video">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
          <i class="iconPic" :class="pic" @click="startPicOrNoPic"></i>
        </div>
        <div
          class="video_container_top_left_art"
          v-if="$route.query.status == 1"
        >
          <div class="video_container_top_left_art_img"></div>
          <div
            class="video_container_top_left_art_art"
            v-for="(item, index) in artInfo.artists"
            :key="item.id"
          >
            {{
              (index == artInfo.artists.length - 1 && item.name) ||
                item.name + "/"
            }}
          </div>
        </div>
        <div class="video_container_top_left_art" @click="jumpYongHu(artInfo.creator.userId)" v-else>
          <div
            class="video_container_top_left_art_img"
            style=" background: white;"
          >
            <el-image
              style="width:100%;height:100%;border-radius: 50%;"
              :src="artInfo.avatarUrl"
            />
          </div>
          <div class="video_container_top_left_art_art">
            {{ artInfo.creator.nickname }}
          </div>
        </div>
        <div
          class="video_container_top_left_titles"
          v-if="$route.query.status == 1"
        >
          <div class="titless">{{ artInfo.name }}</div>
          <i
            v-if="artInfo.desc != null"
            @click="zhankai"
            class="icons"
            :class="iconClick"
          />
        </div>
        <div class="video_container_top_left_titles" v-else>
          <div class="titless">{{ artInfo.title }}</div>
          <i
            v-if="artInfo.description != null"
            @click="zhankai"
            class="icons"
            :class="iconClick"
          />
        </div>
        <div
          class="video_container_top_left_time"
          v-if="$route.query.status == 1"
        >
          <div
            class="video_container_top_left_time_inside"
            style="margin-right: 10px"
          >
            发布:{{ artInfo.publishTime }}
          </div>
          <div class="video_container_top_left_time_inside">
            播放:{{ artInfo.playCount }}次
          </div>
        </div>
        <div class="video_container_top_left_time" v-else>
          <div
            class="video_container_top_left_time_inside"
            style="margin-right: 10px"
          >
            发布:{{
              `${new Date(artInfo.publishTime).getFullYear()}-${new Date(
                artInfo.publishTime
              ).getMonth()  &lt; 10 ? "0" + new Date(
                artInfo.publishTime
              ).getMonth() : new Date(
                artInfo.publishTime
              ).getMonth()}-${new Date(artInfo.publishTime).getDate() &lt; 10 ? "0" + new Date(artInfo.publishTime).getDate() : new Date(artInfo.publishTime).getDate() }`
            }}
          </div>
          <div class="video_container_top_left_time_inside">
            播放:{{ artInfo.praisedCount }}次
          </div>
        </div>
        <div v-if="$route.query.status == 1">
          <div
            style="margin-bottom: 40px"
            :class="{ video_container_top_left_contact: isthide3 }"
            v-if="artInfo.desc != null"
          >
            <div style="font-size: 12px; color: #909399">
              {{ artInfo.desc }}
            </div>
          </div>
        </div>
        <div v-else>
          <div
            style="margin-bottom: 40px"
            :class="{ video_container_top_left_contact: isthide3 }"
            v-if="artInfo.description != null"
          >
            <div style="font-size: 12px; color: #909399">
              {{ artInfo.description }}
            </div>
          </div>
        </div>
        <div class="video_container_top_left_count">
          <el-button round>
            <i class="el-icon-thumb" /> 赞({{
              countInfo.likedCount
            }})</el-button
          >
          <el-button round>
            <i class="el-icon-folder-add" /> 收藏({{
              countInfo.commentCount
            }})</el-button
          >
          <el-button round>
            <i class="el-icon-position" /> 分享({{
              countInfo.shareCount
            }})</el-button
          >
          <el-button round> <i class="el-icon-download" /> 下载(12)</el-button>
        </div>
      </div>
      <div class="video_container_top_right" v-if="$route.query.status == 2">
        <div class="video_container_top_right_title">相关视频</div>
        <div class="video_container_top_right_contact">
          <div
            class="video_container_top_right_contact_inside"
            v-for="(item, index) in videoList"
            :key="index"
            @click="changeVideo(item.vid)"
          >
            <div class="video_container_top_right_contact_inside_left">
              <el-image lazy :src="item.coverUrl" />
            </div>
            <div class="video_container_top_right_contact_inside_right">
              <div class="title_top">{{ item.title }}</div>
              <div
                class="art_bottom"
                v-for="child in item.creator"
                :key="child.userId"
              >
                {{
                  (index == item.creator.length - 1 && child.userName) ||
                    child.userName + "/"
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="video_container_bottom">
      <PingLun
        @changePage="changePage"
        :domLoading="domLoading"
        :resComments="resComments"
      />
    </div>
  </div>
</template>

<script>
import {
  mvDetail,
  mvDetailInfo,
  mvUrl,
  relatedAllvideo,
  commentMv,
  commentPlaylist,
  videoDetail,
  videoDetailInfo,
  videoUrl,
  commentVideo,
} from "../../../api/index";
const PingLun = () => import("../../../components/pingLun.vue");
export default {
  components: {
    PingLun,
  },
  created() {
    if (this.$route.query.status == 2) {
      this.domLoading2 = true;
      videoDetail({ id: this.$route.query.id }).then((res) => {
        this.artInfo = res.data;
        console.log(this.artInfo);
        videoDetailInfo({ vid: this.$route.query.id }).then((res) => {
          this.countInfo = res;
          videoUrl({ id: this.$route.query.id }).then((res) => {
            console.log(res);
            this.playerOptions.sources[0].src = res.urls[0].url;
            relatedAllvideo({ id: this.$route.query.id }).then((res) => {
              this.videoList = res.data;
              commentVideo({ id: this.$route.query.id }).then((res) => {
                this.resComments = res;
                this.domLoading2 = false;
              });
            });
          });
        });
      });
    } else {
      this.domLoading2 = true;
      mvDetail({ mvid: this.$route.query.id }).then((res) => {
        this.artInfo = res.data;
        console.log(this.artInfo);
        mvDetailInfo({ mvid: this.$route.query.id }).then((res) => {
          this.countInfo = res;
          mvUrl({ id: this.$route.query.id }).then((res) => {
            this.playerOptions.sources[0].src = res.data.url;
            commentMv({ id: this.$route.query.id }).then((res) => {
              this.resComments = res;
              this.domLoading2 = false;
            });
          });
        });
      });
    }
  },
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      artInfo: {},
      isthide3: true,
      iconClick: "el-icon-caret-bottom",
      countInfo: {},
      videoList: [],
      resComments: {},
      domLoading: false,
      domLoading2: false,
      pic: "el-icon-money",
    };
  },
  methods: {
    jumpYongHu(id){
      this.$router.push({
        path: "/yongHu",
        query: {
          id
        },
      });
    },
    startPicOrNoPic() {
      const video = document.getElementsByTagName("video")[0];
      if (video !== document.pictureInPictureElement) {
        // 尝试进入画中画模式
        video.requestPictureInPicture();
        this.pic = "el-icon-news";
      } else {
        // 退出画中画
        document.exitPictureInPicture();
        this.pic = "el-icon-money";
      }
    },
    changePage(e) {
      this.domLoading = true;
      commentPlaylist({
        id: this.$route.query.id,
        offset: e * 20,
      }).then((res) => {
        this.resComments = res;
        this.domLoading = false;
      });
    },
    zhankai() {
      this.isthide3 = !this.isthide3;
      if (this.isthide3 === true) {
        this.iconClick = "el-icon-caret-bottom";
      } else {
        this.iconClick = "el-icon-caret-top";
      }
    },
    changeVideo(id) {
      const status = 2;
      this.$router.push({
        path: "/video",
        query: {
          id,
          status,
        },
      });
      this.reload();
    },
    goOn() {
      this.$router.push({
        path: "/",
      });
    },
  },
  inject: ["reload"],
};
</script>

<style lang="scss">
@import "../../../common/css/commonStyle";
.video_container {
  width: 95%;
  padding-top: 20px;
  padding-bottom: 20px;
  .video_container_top {
    display: flex;
    justify-content: space-between;
    .video_container_top_left {
      width: 65%;
      .video_container_top_left_title {
        cursor: pointer;
        display: flex;
        margin-bottom: 20px;
        .el-icon-arrow-left {
          font-size: 18px;
        }
        .mv_info {
          font-weight: 600;
        }
      }
      .video_container_top_left_video {
        margin-bottom: 20px;
        .iconPic {
          position: relative;
          font-size: 25px;
          bottom: 280px;
          left: 470px;
          cursor: pointer;
          color: whitesmoke;
        }
        .video-js .vjs-icon-placeholder {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .video_container_top_left_art {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        cursor: pointer;
        .video_container_top_left_art_img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: blueviolet;
          margin-right: 10px;
        }
        .video_container_top_left_art_art {
          font-size: 14px;
          color: #909399;
        }
      }
      .video_container_top_left_titles {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
        display: flex;
        .titless {
          @include white_space;
        }
        .icons {
          cursor: pointer;
        }
      }
      .video_container_top_left_time {
        display: flex;
        color: #909399;
        font-size: 13px;
        margin-bottom: 10px;
      }
      .video_container_top_left_contact {
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .video_container_top_left_count {
        display: flex;
        justify-content: space-around;
      }
    }
    .video_container_top_right {
      width: 30%;
      .video_container_top_right_title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .video_container_top_right_contact {
        .video_container_top_right_contact_inside {
          display: flex;
          margin-bottom: 10px;
          cursor: pointer;
          .video_container_top_right_contact_inside_left {
            width: 50%;
            height: 70px;
            margin-right: 5px;
            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
          }
          .video_container_top_right_contact_inside_right {
            width: 35%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #909399;
            .title_top {
              font-size: 14px;
              @include white_space;
            }
            .art_bottom {
              @include white_space;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
